let d = document.querySelector('.time_day');
let h = document.querySelector('.time_hour');
let m = document.querySelector('.time_minute');
let s = document.querySelector('.time_second');

countdown();
//定时器
setInterval(countdown, 1000);

function countdown() {
    var nowTime = +new Date(); //当前时间的总的毫秒
    var qiuzhao = +new Date('2023-7-1 12:00:00'); //秋招的时间的总的毫秒数
    var times = (qiuzhao - nowTime) / 1000; //times是剩余时间的毫秒数

    let day = parseInt(times / 60 / 60 / 24);
    day = day < 10 ? '0' + day : day;
    d.innerHTML = day;

    let hour = parseInt(times / 60 / 60 % 24);
    hour = hour < 10 ? '0' + hour : hour;
    h.innerHTML = hour;

    let minute = parseInt(times / 60 % 60);
    minute = minute < 10 ? '0' + minute : minute;
    m.innerHTML = minute;

    let second = parseInt(times % 60);
    second = second < 10 ? '0' + second : second;
    s.innerHTML = second;

    // console.log('还剩' + day + '天' + hour + '时' + minute + '分' + second + '秒');
}


// 循环精灵图
var as = document.querySelectorAll('.mod_copyright_auth_ico');
// console.log(as);
for (var i = 0; i < as.length; i++) {
    var index = i * 38;
    as[i].style.backgroundPosition = '-205px -' + index + 'px'
}


// 显示文本框内容
var inputs = document.querySelectorAll('.text');
// console.log(inputs);
for (var i = 0; i < inputs.length; i++) {
    inputs[i].onfocus = function () {
        if (this.value === '手机') {
            this.value = '';
        }
        this.style.color = '#333'
    }
    inputs[i].onblur = function () {
        if (this.value === '') {
            this.value = '手机'
        }
        this.style.color = '#ccc'
    }
}


// 导航栏展开
var tab_as = document.querySelector('.tab').querySelectorAll('a');
var tab_cons = document.querySelectorAll('.tab_con');
console.log(tab_cons[0].getAttribute('index'));
// 给每个a链接设置index属性
// 给每个a添加onmouseover和onmouseout事件
for (var i = 0; i < tab_as.length; i++) {
    tab_as[i].setAttribute('data-index',i);
    // 鼠标放上去就出现
    tab_as[i].onmouseover = function () {
        var index = this.getAttribute('data-index');

        for (var j = 0; j < tab_cons.length; j++) {

            if (index == tab_cons[j].getAttribute('data-index')) {
                tab_cons[j].style.display = 'block'
            }
        }
    }
    // 鼠标离开就消失
    tab_as[i].onmouseout = function () {
        var index = this.getAttribute('data-index');

        for (var j = 0; j < tab_cons.length; j++) {

            if (index == tab_cons[j].getAttribute('data-index')) {
                tab_cons[j].style.display = 'none'
            }
        }
    }
}



// 键盘事件
// 点击s键，光标就定位到搜索框（文本框获得焦点）
document.addEventListener('keyup', function (e) {
    // console.log(e.key);
    if (e.key == 's') {
        // console.log('点击了s');
        input.focus();
    }
})


// 滚动条滚动时，搜索框固定
var searchFix  = document.querySelector('.search_fix');
document.addEventListener('scroll', function () {
    console.log(Math.floor(window.pageYOffset));
    if (Math.floor(window.pageYOffset) >= 660) {
        searchFix.style.display = 'block';
        // searchFix.style.top = '0px'
        animate(searchFix, 0)
    } else {
        searchFix.style.display = 'none';
        searchFix.style.top = '-52px'
    }
})

// 给动画函数封装obj目标对象，target目标位置
// 这是向下移动
function animate(obj, target) {
    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {

        if (obj.offsetTop >= target) {
            clearInterval(obj.timer);
            // 回调函数写到定时器结束里面
            // if (callback) {
            //     // 调用函数
            //     callback();
            // }
            callback && callback();
        } else {
            console.log(obj.offsetTop);
            obj.style.top = obj.offsetTop + 1 +'px';
        }
    }, 10)
}

// 向右移动动画
function animate1(obj, target, callback) {
    // console.log(callback);  callback = function() {}  调用的时候 callback()

    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 步长值写到定时器的里面
        // 把我们步长值改为整数 不要出现小数的问题
        // var step = Math.ceil((target - obj.offsetLeft) / 10);
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            // 停止动画 本质是停止定时器
            clearInterval(obj.timer);
            // 回调函数写到定时器结束里面
            // if (callback) {
            //     // 调用函数
            //     callback();
            // }
            callback && callback();
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
}



// 轮播图
// ul
var sliderWrap = document.querySelector('.slider_wrap');
console.log(sliderWrap.children.length);
// 小圆点
var sliderIndicators = document.querySelector('.slider_indicators');
console.log(3);
// ul下的li
var sliderItem = document.querySelector('.slider_item')
// 获得图片的宽度
var width = sliderItem.offsetWidth;
var num = 0;
// circle控制小圆圈样式跟着图片动
var circle = 0;
// console.log(sliderItem.offsetWidth);
for (var i = 0; i < sliderWrap.children.length; i++) {
    // 创建个小i
    console.log(1);
    // 根据有多少个图片插入多少个小圆点
    var btn = document.createElement('i');
    // 记录当前小圆圈的索引号通过自定义属性来做
    btn.setAttribute('index', i);
    btn.className = 'slider_indicators_btn';
    sliderIndicators.appendChild(btn);
    btn.addEventListener('click', function () {
        // console.log(sliderIndicators.children[0]);
        console.log(sliderWrap.children.length);
        for (var i = 0; i < sliderWrap.children.length - 1; i++) {
            sliderIndicators.children[i].style.backgroundColor = 'rgba(255,255,255,.4)'
        }
        this.style.backgroundColor = '#fff';
        // 点击小圆圈，移动图片 sliderWrap
        // sliderWrap移动的距离是小圆圈的索引号乘以图片宽度，注意是负值
        // 当点击了某个小li，就取得当前li的索引号
        var index = this.getAttribute('index');
        // 将索引号赋值给Num
        num = index;
        // 将索引号赋值给circle
        circle = index;
        console.log('index', index);
        console.log('width', width);
        animate1(sliderWrap, - index * width)
    })
}
sliderIndicators.children[0].style.backgroundColor = '#fff';

// 为了实现无缝切换，克隆第一个li放最后面
var first = sliderWrap.children[0].cloneNode(true);
sliderWrap.appendChild(first);

// 节流阀
var flag = true;
// 右按钮
var btnRight = document.querySelector('.slider_control_next');
// console.log(btnRight);
btnRight.addEventListener('click', function () {
    if (flag) {
        flag = false;
        num++;
        // 为了实现无缝切换，需要在ul最后加上第一个li
        if (num == sliderWrap.children.length) {
            num = 1;
            sliderWrap.style.left = 0;
        }
        circle++
        // 控制小圆圈跟着图片变换
        if (circle == sliderWrap.children.length - 1) {
            circle = 0;
        }
        for (var i = 0; i < sliderWrap.children.length - 1; i++) {
            // console.log(2);
            sliderIndicators.children[i].style.backgroundColor = 'rgba(255,255,255,.4)'
        }
        sliderIndicators.children[circle].style.backgroundColor = '#fff';
        animate1(sliderWrap, - num * width, function () {
            flag = true;
        });
    }
})


// 左按钮
var btnLeft = document.querySelector('.slider_control_prev');
btnLeft.addEventListener('click', function () {
    if (flag) {
        flag = false;
        if (num == 0) {
            num = sliderWrap.children.length - 1;
            sliderWrap.style.left = - width * num + 'px'
        }
        num--;
        animate1(sliderWrap, - num * width);
        circle--;
        // 如果circle为0 小圆圈要改成最后一个
        if (circle < 0) {
            circle = sliderWrap.children.length - 2;
        }
        for (var i = 0; i < sliderWrap.children.length - 1; i++) {
            // console.log(2);
            sliderIndicators.children[i].style.backgroundColor = 'rgba(255,255,255,.4)'
        }
        sliderIndicators.children[circle].style.backgroundColor = '#fff';
        animate1(sliderWrap, - num * width, function () {
            flag = true;
        });
    }
})

// 自动播放轮播图
var timer = setInterval(function () {
    // 手动调用点击事件
    btnRight.click();
}, 2000)

// 鼠标经过就停止定时器
var sliderList = document.querySelector('.slider_list');
sliderList.addEventListener('mouseenter', function () {
    clearInterval(timer);
    timer = null;
})
// 鼠标离开就继续
sliderList.addEventListener('mouseleave', function () {
    timer = setInterval(function () {
        // 手动调用点击事件
        btnRight.click();
    }, 2000)
})